<template>
    <div class="team" @click="ischecked=false">
        <div class="header">
            <h4 class="title">团队人员<img src="../../assets/team/team.png"></h4>
            <span class="btn"><el-button type="info" @click="addPerson">添加</el-button></span>
            <span class="select" @click.stop="ischecked = true">
                <p>
                    <template>
                        <el-select v-model="personAdd" placeholder="选择项目成员进行添加">
                            <el-option-group v-for="group in personList" :label="group.label">
                                <el-option v-for="item in group.children" :label="item.label" :value="item.id">
                                </el-option>
                            </el-option-group>
                        </el-select>
                    </template>
                </p>
            </span>
        </div>
        <div class="table">
            <el-table :data="teamInfo" class="tm-table" fit>
                <el-table-column prop="name" label="姓名" width="100"></el-table-column>
                <el-table-column prop="email" label="邮箱"></el-table-column>
                <el-table-column prop="phone" label="联系电话"></el-table-column>
                <el-table-column prop="duty" label="职务"></el-table-column>
                <el-table-column label="操作" width="100" v-if="role == 'ADMIN' || id == createEmpId">
                    <template scope="scope">
                        <el-button v-if="teamInfo[scope.$index].id !== createEmpId" @click="deleteRow(scope.$index, teamInfo)" type="text" size="small">移除</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            personList: [],
            personAdd: '',
            listLoading: false,
            teamInfo: [],
            ischecked: false,
            createEmpId: localStorage.getItem('createEmpId'),
            role: localStorage.getItem('ROLE'),
            id: localStorage.getItem('ID')
        };
    },
    methods: {
        deleteRow(index, rows) {
            this.$confirm('确认移除该成员吗?', '提示', {
                type: 'warning'
            }).then(() => {
                var empId = rows[index].id;
                this.$http
                .delete(
					this.h + '/projects/' + localStorage.getItem('projectId') + '/employees/' + empId,
                    {
                        headers: { 'Xwt-Request-Token': localStorage.getItem('TOKEN') }
                    }
                )
                .then((res) => {
                    console.log(res);
                    if (res.data.code == '500') {
                        this.$message.error(res.data.msg);
                    } else {
                        rows.splice(index, 1);
                        this.$message({
                            type: 'success',
                            message: '删除成功!'
                        });
                    }
                })
            }).catch((err) => {
                console.log(err);
            });
        },
        addPerson() {
            if (this.personAdd) {
                console.log(this.personAdd);
                this.$http
                    .post(
						this.h + '/projects/' + localStorage.getItem('projectId') + '/employees',
                    {
                        'empId': this.personAdd
                    },
                    {
                        headers: { 'Xwt-Request-Token': localStorage.getItem('TOKEN') }
                    }
                    )
                    .then((res) => {
                        this.personAdd = '';
                        if (res.data.code == '500') {
                            this.$message({
                                type: 'error',
                                message: res.data.msg
                            });
                        } else {
                            this.$http.get(
                                this.h + '/projects/' + localStorage.getItem('projectId') + '/employees',
                                {
                                    headers: { 'Xwt-Request-Token': localStorage.getItem('TOKEN') }
                                }
                            ).then((res) => {
                                this.teamInfo = res.data.data;
                            });
                        }
                    })
                    .catch((res) => {
                        this.$message({
                            type: 'error',
                            message: '添加失败'
                        });
                    })
            } else {
                this.$message({
                    message: '请选择项目成员',
                    type: 'warning'
                });
            }

        }
    },
    created() {
        console.log(this.createEmpId);
        console.log(this.role);
        this.$http.get(
			this.h + '/projects/' + localStorage.getItem('projectId') + '/employees',
            {
                headers: { 'Xwt-Request-Token': localStorage.getItem('TOKEN') }
            }
        ).then((res) => {
            // console.log(res.data.data);
            this.teamInfo = res.data.data;
        });
        this.$http
            .get(
                this.h + '/treeNode/deptEmp',
            {
                headers: { 'Xwt-Request-Token': localStorage.getItem('TOKEN') }
            }
            ).then((res) => {
                this.personList = res.data.data;
            })
            
    }
};

</script>

<style lang="scss">
.team {
    width: 92%;
    margin: 34px 4%;
    border-radius: 5px;
	.header {
		position: relative;
		z-index: 99;
		float: left;
		width: 100%;
		padding: 0 32px 0 42px;
		background: #f7f8fc;
		border: 1px solid #e7e9f4;
		border-bottom: 0;
		border-radius: 5px 5px 0 0;
		line-height: 56px;
		span {
			display: inline-block;
		}
		.title {
			float: left;
			font-size: 16px;
			font-weight: bold;
            img {
                vertical-align: middle;
                margin-left: 5px;
                margin-top: -2px;
            }
		}
		.select {
			float: right;
			position: relative;
            .el-select {
                vertical-align: middle;
            }
		}
		.btn {
			float: right;
			margin-left: 14px;
            .el-button {
                background: #00c583;
                border: 1px solid #00c583;
            }
		}
	}
    .table {
        .el-table {
            width: 100%;
            text-align: center;
            .cell {
                line-height: 32px;
                padding: 0;
            }
            tbody tr td {
                padding: 15px 18px;
                font-size: 16px;
                color: #333;
            }
        }
    }
}
</style>
